<template>
  <el-input
    :placeholder="placeholder"
    :disabled="disabled"
    @click.native="showTable"
    @clear="clear"
    :value="textValue"
    :readonly="!clearable"
    :clearable="clearable"
    suffix-icon="el-icon-arrow-down"/>
</template>

<script>
export default {
  name: 'OsInputTable',
  props: {
    clearable: Boolean,
    value: [String, Object],
    displayValue: String,
    disabled: Boolean,
    columns: Array,
    action: String,
    data: Array,
    form: Object,
    otherSearch: [Object, Function],
    valueField: { type: String, default: 'id' },
    rowKey: { type: String, default: 'id' },
    labelField: String,
    nameField: String,
    placeholder: { type: String, default: '请选择' },
    page: {},
    vxe: Object,
    dialogProps: {
      type: Object,
      default: _ => ({})
    }
  },
  data () {
    return {
      selected: {},
      textValue: '',
      clearFlag: false
    }
  },
  computed: {
    multiple () {
      return this.columns.some(c => c.type === 'selection')
    }
  },
  watch: {
    value: {
      handler (val) {
        if (val) {
          if (typeof (val) === 'string') {
            this.setInitValue(val)
          } else {
            this.setInitValue(val.ids)
            this.textValue = val.names
          }
        } else {
          this.textValue = ''
          this.selected = this.multiple ? [] : {}
        }
      },
      immediate: true
    },
    displayValue (val) {
      this.textValue = val
    }
  },
  methods: {
    setInitValue (val) {
      this.selected = this.multiple ? val.split(',').map(item => ({ [this.valueField]: item })) : { [this.valueField]: val }
      if (this.nameField) {
        this.textValue = this.nameField
        return
      }
      if (!this.labelField || this.labelField === this.valueField) {
        this.textValue = val
      }
    },
    setOtherSearch (otherSearch) {
      this.otherSearch = otherSearch
    },
    showTable () {
      if (this.disabled) return
      if (this.clearFlag) {
        this.clearFlag = false
        return
      }
      // this.selected = this.multiple ? [] : {}
      let otherSearch = this.otherSearch
      if (typeof otherSearch === 'function') {
        const { params } = this.vxe
        const { row } = params
        otherSearch = otherSearch({ row })
      }
      this.$utils.dialog(this.placeholder,
        <os-table stripe size="small" selected={this.selected} border rowKey={this.rowKey}
          {...{
            on: {
              'update:selected': val => {
                this.selected = val
              },
              'row-dblclick': () => {
                this.submit()
              }
            }
          }}
          data={this.data}
          page={this.page}
          otherSearch={otherSearch}
          columns={this.columns} action={this.action} form={this.form}/>,
        { btn: [{ text: '确定', cb: this.submit }], ...this.dialogProps })
    },
    submit () {
      let textValue = ''
      let value = ''
      if (this.multiple) {
        textValue = [...new Set(this.selected.map(item => item[this.labelField || this.valueField]))].join(',')
        value = [...new Set(this.selected.map(item => item[this.valueField]))].join(',')
      } else {
        textValue = this.selected[this.labelField || this.valueField]
        value = this.selected[this.valueField]
      }
      this.textValue = textValue
      this.$emit('input', value)
      this.$emit('select', this.selected)
      if (this.vxe) {
        const { renderOpts, params } = this.vxe
        const { on = {} } = renderOpts
        const { row, column } = params
        row[column.property] = value
        on.select && on.select(this.selected, params)
      }
      this.$utils.hideDialog()
    },
    clear () {
      this.clearFlag = true
      this.textValue = ''
      this.selected = this.multiple ? [] : {}
      this.$emit('input', '')
      this.$emit('select', this.selected)
    }
  }
}
</script>

<style lang="scss" scoped></style>
